<template>
  <div id="supply_manage">
    <el-header>
      <ul>
        <li @click="cur_tab='all'" :class="{cur_tab:cur_tab=='all'}">全部</li>
        <li @click="cur_tab='Unassigned'" :class="{cur_tab:cur_tab=='Unassigned'}">未分配</li>
        <li @click="cur_tab='update'" :class="{cur_tab:cur_tab=='update'}">修改</li>
        <li @click="cur_tab='Allocated'" :class="{cur_tab:cur_tab=='Allocated'}">已分配</li>
        <li @click="cur_tab='active'" :class="{cur_tab:cur_tab=='active'}">活跃商家</li>
        <li @click="cur_tab='sleep'" :class="{cur_tab:cur_tab=='sleep'}">沉睡商家</li>
      </ul>
    </el-header>
    <el-main>
      <div class="search">
        <el-form :inline="true" class="demo-form-inline" size="small">
          <el-form-item label="供应商名称">
            <el-input v-model="user" placeholder="单行输入"></el-input>
          </el-form-item>
          <el-form-item class="search_address">
            <no-ssr>
              <el-cascader size="large" :options="options" v-model="selectedOptions" @change="city_Change" placeholder="请选择省市区">
              </el-cascader>
            </no-ssr>
          </el-form-item>
          <el-form-item class="search_btn">
            <el-button type="primary">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table">
        <el-row class="table_head">
          <el-col :span="4">
            商家名称
          </el-col>
          <el-col :span="2">
            姓名
          </el-col>
          <el-col :span="4">
            地址
          </el-col>
          <el-col :span="2">
            销售额
          </el-col>
          <el-col :span="3">
            销售量
          </el-col>
          <el-col :span="3">
            申请时间
          </el-col>
          <el-col :span="3">
            最后活跃时间
          </el-col>
          <el-col :span="3">
            操作
          </el-col>
        </el-row>

        <el-row class="table_list">
          <el-col :span="4">
            陈世力
            <i>未分配</i>
            <span>封停:2018/07/02-2018/08/02</span>
          </el-col>
          <el-col :span="2">
            陈力
            <p>15658163225</p>
          </el-col>
          <el-col :span="4">
            浙江省杭州市滨江区先锋科技大厦
          </el-col>
          <el-col :span="2">
            9934.00
          </el-col>
          <el-col :span="3">
            44444444
          </el-col>
          <el-col :span="3">
            2018/03/21 09:43
          </el-col>
          <el-col :span="3">
            2018/03/21 09:43
            <i>沉睡时间1个月</i>
          </el-col>
          <el-col :span="3">
             <!--<nuxt-link to="#">供应设置</nuxt-link>
             <nuxt-link to="#">查看数据</nuxt-link>-->
              <el-button type="text" width="100%" @click="dialogFormVisible = true">供应设置</el-button>
              <el-button type="text" width="100%" @click="dialogFormVisible = true">查看数据</el-button>
              <el-button type="text"  width="100%" @click="dialogFormVisible = true">解封</el-button>
          </el-col>
        </el-row>
      </div>
    </el-main>
    <el-dialog class="form-dialog" title=" " :visible.sync="dialogFormVisible" width="20%">
        <el-form :model="form">
          <el-form-item label="" :label-width="formLabelWidth">
            <span>请输入封停原因</span>
            <el-input type="textarea" v-model="form.region" placeholder="多行输入"></el-input>
          </el-form-item>
          <el-form-item label="" :label-width="formLabelWidth" >
              <span>请输入封停日期</span>
              <el-date-picker
                size="mini"
                v-model="form.value6"
                type="daterange"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期" >
               </el-date-picker>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button size="mini" @click="dialogFormVisible = false">取 消</el-button>
          <el-button size="mini" type="primary" @click="dialogFormVisible = false">确 定</el-button>
        </div>
    </el-dialog>
  </div>
</template>

<style lang="scss" scoped>
#supply_manage {
  height: 100%;
  & /deep/ {
    .el-header {
      height: 90px !important;
      width: 100%;
      line-height: 88px;
      border-bottom: 1px solid #ddd;
      padding-left: 28px;
      position: fixed;
      top: 0;
      z-index: 1;
      background: #fff;
      ul {
        list-style: none;
        li {
          float: left;
          margin-right: 50px;
          cursor: pointer;
          width: 65px;
          text-align: center;
        }
        .cur_tab {
          border-bottom: 1px solid #409eff;
          color: #409eff;
        }
      }
    }
    .el-main {
      height: 100%;
      padding: 0;
      margin-top: 90px;
      background: #f5f9fe;
      .table_head{
          color:#1f8cfc;
          font-weight: bold;
          font-size: 16px;
      }
      .search {
        padding: 30px 0 20px 30px;
        background: #fff;
        &_btn {
          margin-left: 40px;
        }
        form {
          display: flex;
          align-items: center;
          input {
            height: 32px !important;
          }
        }
      }
      .table {
        text-align: center;
        &_head {
          border-bottom: 1px solid #ddd;
          padding-bottom: 10px;
          background: #fff;
          padding-left: 30px;
        }
        &_list {
          margin: 15px 0 0 40px;
          padding: 20px 0;
          background: #fff;
          border-top-left-radius: 10px;
          border-bottom-left-radius: 10px;
          display: flex;
          align-items: center;
          line-height: 25px;
          &:hover {
            background: #d9e9fc;
          }
          i,
          span {
            display: block;
            font-size: 12px;
          }
           .el-button{
                 width: 100%;
                margin-left: 0;
                font-size: 16px;
           }
          i {
            color: #aaa;
            font-style: normal;
          }
          span {
            color: #409eff;
          }
          a {
            display: block;
            color: #409eff;
            cursor: pointer;
          }
        }
      }
    }
  }
      .form-dialog{
        padding:0 20px;
        & /deep/ {
            .el-range-editor.el-input__inner  {
              width:100%;
            }
      .el-form-item__content{
        line-height:24px;
      }
      .el-date-editor .el-range-separator{
        width:12%;
      }
      .el-date-editor--daterange.el-input__inner{
        width:100%;
        }
      .el-date-editor .el-range-input{
        width:50%;
      }
      .el-dialog__body{
        padding:0 20px;
      }
      }
    }
}
</style>

<script>
if (process.browser) {
  var regionData = require('element-china-area-data').regionData
}
export default {
  data() {
    return {
      cur_tab: 'all', //all:全部,Unassigned:未分配,Allocated:已分配,update:修改，active:活跃,sleep:沉睡
      user: '',
      options: regionData,
      selectedOptions: [],
      dialogFormVisible: false,
        form: {
          value6: '',
          region: '',
          date1: '',
          date2: '',
          delivery: false,
          type: [],
          resource: '',
          desc: ''
        },
        formLabelWidth: '0px'
    }
  },
  methods: {
    city_Change(value) {
      this.provinceCode = value[0]
      this.cityCode = value[1]
      this.districtCode = value[2]
      console.log(this.provinceCode)
      console.log(this.cityCode)
      console.log(this.cityCode)
    },
  }
}
</script>
